Uber - How I programmatically built 256 new design system components in Figma 如何以程式設計方式在Figma中構建了256個新的設計系統元件

優步的Base設計系統提供了地圖示記元件，用於在地圖上顯示位置。為了展示更多上下文資訊，我們決定在標記上新增徽章元件。由於標記和徽章都有多種變體（如大小、佈局和樣式選項），這些組合產生了256個新元件。手動建立這些變體不僅耗時，而且容易出錯。

各種Base地圖示記元件。

Why did we add badges to the markers? 為什麼我們要在標記上新增徽章？

徽章UI通常用於展示更新或某種優惠資訊。在這種情況下，徽章是對標記的補充。

標記徽章的尺寸、內容和顏色都可以自定義。這些徽章的設計規範提供了四種不同的尺寸：

由於優步在一些從右到左書寫的市場運營，這些徽章也支援雙向性。

如何最高效地構建新元件？ What is the most efficient process to construct the new components?

完成徽章設計後，我們需要在Figma中構建元件、編寫檔案併發布到組織庫。新增四種徽章變體會使地圖示記元件數量增加近5倍。

示例：元件命名從簡單的：

擴充套件為包含徽章的版本：

對於現有的68個地圖示記，這將是一項繁重的工作。

更復雜的是：

參考表格包含了標記和徽章的配對資訊及畫素偏移位置。

需要建立256個支援徽章的新標記元件。這個繁瑣的手動過程容易出錯，因為需要反覆精確定位每個徽章。這正是使用Figma外掛API自動化的理想場景。

Automation via the Figma Plugin API 透過Figma外掛API實現自動化

Figma外掛是一個簡單好用的工具，它讓我們能夠像平常使用Figma一樣來處理設計檔案。透過外掛，我們可以檢視和修改檔案內容、調整顯示方式，還能管理各種設計樣式。如果你瞭解網頁開發，你會發現它的使用方法很熟悉。

Figma外掛API讓我們能夠建立和修改設計內容。

Uber內部有很多好用的Figma工具和外掛，這些工具幫助設計師更好地工作。建立新的Figma外掛很方便，因為Uber已經準備好了基礎框架，可以幫助開發者快速完成外掛的建立、測試和釋出。

Configuring the Figma API to construct the new components 配置Figma API以構建新元件

我用簡單的步驟開發了一個Figma外掛來自動建立地圖示記。

首先，我設定了一個簡單的配置檔案，其中包含了每個標記和徽章的尺寸和位置資訊。

這個外掛按照以下步驟工作：

  1. 找出所有可以新增徽章的地圖示記
  1. 檢查每個標記，看看可以搭配哪些徽章
  1. 當找到合適的標記和徽章搭配時：
  1. 確定徽章應該放在標記的具體位置
  1. 把徽章放到標記上，確保位置準確。這需要一些時間，因為要設定很多自動佈局的規則
  1. 把新做好的標記整齊地放入主檔案中
  1. 重複以上步驟，直到處理完所有標記

使用這個外掛非常簡單：只要開啟外掛視窗，點選"構建標記"按鈕就可以了。外掛會自動完成所有工作。在開發過程中，我反覆測試和改進指令碼以確保正確執行。使用指令碼的優勢在於可以快速撤銷並重新執行，直到達到預期效果，這比手動操作更高效。

Testing markers at scale 批次測試標記

雖然我已經完成了新的地圖示記和徽章元件，但還需要進行全面測試。我要檢查是否有任何位置和大小的問題，特別是那些可能由自動化指令碼造成的問題。同時，我也要確保將來修改基礎元件時，這些測試仍然可以正常進行。

我主要關注兩個測試重點：

UI test 1: badge positioning UI 測試1：徽章位置

徽章在標記上的具體位置會根據標記和徽章的大小來調整。比如，有些徽章需要向上移動3畫素，有些則需要移動5畫素。

定位示例：兩種不同的標記型別

我使用外掛API建立了一些輔助線來測試徽章的位置是否正確。這些輔助線會自動出現在每個徽章應該在的位置上。每個新標記都有兩條輔助線 ，一條水平線和一條垂直線，幫助我檢查徽章是否放在了正確的位置。

這些輔助線是可以隨時開啟或關閉的，它們會根據每個標記和徽章的組合自動調整位置。

UI test 2: text length UI測試2：文字長度

需要測試不同文字長度對徽章位置的影響，因為實際使用中標記和徽章的文字長度會有變化。外掛介面有兩個文字輸入框，可以輸入任意文字並實時顯示在所有標記上，以驗證不同文字長度下徽章位置的準確性。

一次性更新所有標記的文字內容。

Wrapping up 總結

隨著設計系統日益複雜，手動建立元件變體容易出錯且效率低下。在大規模系統中，這些小錯誤會被放大並影響使用者體驗。透過自動化工作流程，我們能夠建立經過全面測試的高質量元件。

最終，自動化構建不僅避免了錯誤，還提高了效率。透過程式化測試，我能夠全面驗證元件質量。